<template>
  <div class="wukuang">
    <v-md-editor
      ref="editorRef"
      v-model="text"
      height="calc(100vh - 100px)"
      @save="save"
    />
  </div>
</template>
  
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "Wukuang",
  setup() {
    const router = useRouter();

    const state = reactive({
      editorRef: null as any,
      text: ``,
    });
    const save = (text: any, html: any) => {
      router.push({ name: "MdPreview" });
      localStorage.setItem("mdPreview:text", text);
      localStorage.setItem("mdPreviewHtml:html", html);
      console.log("state.editorRef", state.editorRef);
      console.log("text", state.editorRef.text);
      console.log("v-model", state.editorRef.vModel);
      console.log("mode", state.editorRef.mode);
      console.log("height", state.editorRef.height);
      console.log("tab-size", state.editorRef.tabSize);
      console.log("tocNavPositionRight", state.editorRef.tocNavPositionRight);
      console.log("defaultShowToc", state.editorRef.defaultShowToc);
      console.log("placeholder", state.editorRef.placeholder);
      console.log("autofocus", state.editorRef.autofocus);
      console.log("default-fullscreen", state.editorRef.defaultFullscreen);
      console.log("include-level", state.editorRef.includeLevel);
      console.log("left-toolbar", state.editorRef.leftToolbar);
      console.log("right-toolbar", state.editorRef.rightToolbar);
      console.log("toolbar", state.editorRef.toolbar);
      console.log("toolbar-config", state.editorRef.toolbarConfig);
      console.log("disabled-menus", state.editorRef.disabledMenus);
      console.log("upload-image-config", state.editorRef.uploadImageConfig);
      console.log("before-preview-change", state.editorRef.beforePreviewChange);
      console.log("codemirror-config", state.editorRef.codemirrorConfig);
      console.log("codemirror-style-reset", state.editorRef.codemirrorStyleReset);
    };
    return {
      ...toRefs(state),
      save,
    };
  },
});
</script>
  
  
<style scoped>
.wukuang {
  /* position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; */
  z-index: 9999;
}
</style>